<template>
  <div>
    <div class="app-container">
      <div class="left">
        <!-- 左树 -->
        <el-tree
          ref="list"
          :data="list"
          :props="defaultProps"
          accordion
          highlight-current
          default-expand-all
          node-key="id"
          @current-change="onCurrentChange"
        />
      </div>
      <div class="right">
        <!-- 右表 -->
        <el-card shadow="box-card">
          <template #header>
            <span>作业范围</span>
            <el-row type="flex" justify="end" align="top">
              <el-button class="edit">编辑</el-button>
            </el-row>
          </template>
          <el-form :inline="true">
            <el-form-item label="地区关键词:">
              <el-input v-model="search.toponym" placeholder="请输入地区关键词" />
            </el-form-item>
          </el-form>
          <!-- 地图插件 -->
          <gaode-logistics ref="jobAreaMap" :center="center" />
        </el-card>
      </div>
    </div>
  </div>

</template>

<script>
import { gitOrganizationListAPI } from '@/api/basicData'
import GaodeLogistics from './components/Gaode-Logistics.vue'

export default {
  components: { GaodeLogistics },

  data() {
    return {
      // 树组件保存的数据
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      center: [],
      // 搜索地名
      search: {
        // 地名
        toponym: ''
      }
    }
  },
  created() {
    this.organList()
  },
  methods: {
    async organList() {
      const res = await gitOrganizationListAPI()
      this.list = JSON.parse(res.data)
      this.center = [this.list[0].longitude, this.list[0].latitude]
      this.$refs.jobAreaMap.initMap()
      // 等dom更新结束， 再执行
      this.$nextTick(() => {
        this.$refs.list.setCurrentKey(this.list[0].id)
      })
    },
    // 当点击事件触发后
    onCurrentChange(id) {
      this.center = [id.longitude, id.latitude]
      this.$refs.jobAreaMap.initMap() // 调用子组件渲染新的地图位置
    }
  }
}
</script>

<style lang="scss" scoped>
  .right{
  width: 1436px !important;
}
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }

}
.el-card.box-card.is-always-shadow{
  width: 1380px;
  margin-left: 30px;
}
::v-deep .el-card__header{
  width: 1436px !important;
  color: #2a2929;
    font-weight: 700;
    font-size: 16px;
}
::v-deep .el-card__body{
  width: 1436px !important;

    padding: 20px 0;
    width: 100%!important;
    padding-right: 37px;
}
// 输入框长度
::v-deep .form .el-input__inner{
  width: 400px;
}
  .box-card {
    width: 480px;
    margin-bottom: 80px;
  }
  // 编辑按钮位置
 ::v-deep.edit .el-button .edit .el-button--default{
    // margin-bottom: 1000px;
    margin-top: 30px;
 }
</style>
